<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          type="primary"
          @click="download()"
          size="mini"
        >
          下载Excel
        </el-button>
      </el-card>
      <!-- 放大图片 -->
      <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column
            label="礼品卡名称"
            align="center"
            prop="giftName"
          ></el-table-column>

          <el-table-column
            label="兑换码"
            align="center"
            prop="account"
          ></el-table-column>

          <el-table-column label="APP二维码" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.appQrCode"
                @click="clickImg($event)"
                style="width: 50px; height: 50px"
              />
            </template>
          </el-table-column>

          <el-table-column label="小程序二维码" prop="endTime" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.appletQrCode"
                @click="clickImg($event)"
                style="width: 50px; height: 50px"
              />
            </template>
          </el-table-column>

          <el-table-column label="礼品卡劵" prop="endTime" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.giftQrCode"
                @click="clickImg($event)"
                style="width: 50px; height: 50px"
              />
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ scope.row.receiveStatus | statusFilters }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>
    
<script>
import "@/styles/index.scss";
import BigImg from "@/components/BigImg/BigImg.vue";
import { giftDetails } from "@/api/marke/index";
import exportToExcel from "../../../util/excel/Export2Excel";

export default {
  components: {
    BigImg,
  },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        giftId: null,
      },
      list: [],
      total: 0,
      showImg: false,
      imgSrc: "",
    };
  },
  filters: {
    statusFilters(value) {
      if (value === 0) {
        return "未领取";
      } else if (value === 1) {
        return "已领取";
      }
    },
  },
  created() {
    this.listQuery.giftId = this.$route.query.giftId;
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      giftDetails(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src;
    },
    viewImg() {
      this.showImg = false;
    },
    download() {
      const tHeader = [
        "ID",
        "礼品卡名称",
        "兑换码",
        "领取状态",
        "APP二维码",
        "小程序二维码",
        "礼品卡劵",
      ];
      let re = /https/; // 字符串中包含http,则默认为图片地址
      let th_len = tHeader.length; // 表头的长度
      let tb_len = this.list.length; // 记录条数
      let width = 80; // 设置图片大小
      let height = 80;

      let thead = "<thead><tr>";
      for (let i = 0; i < th_len; i++) {
        thead += "<th>" + tHeader[i] + "</th>";
      }
      thead += "</tr></thead>";

      // 添加每一行数据
      let tbody = "<tbody>";
      for (let i = 0; i < tb_len; i++) {
        tbody += "<tr>";
        let row = this.list[i]; // 获取每一行数据

        for (let key in row) {
          if (re.test(row[key])) {
            // 如果为图片，则需要加div包住图片
            //
            tbody +=
              '<td style="width:' +
              width +
              "px; height:" +
              height +
              'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' +
              row[key] +
              "' " +
              " " +
              "width=" +
              '"' +
              width +
              '"' +
              " " +
              "height=" +
              '"' +
              height +
              '"' +
              "></div></td>";
          } else {
            tbody += '<td style="text-align:center">' + row[key] + "</td>";
          }
        }
        tbody += "</tr>";
      }
      tbody += "</tbody>";

      let table = thead + tbody;

      exportToExcel(table, "列表excel");
    },
  },
};
</script>
    
    <style>
</style>